import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Animated,
    Button
} from 'react-native';
import BaseComponentF from './BaseComponentF';
/**
 * 学习使用动画
 */
class AnimationDemo extends Component {
    render() {
        return (
            <FadeInView />
        );
    }
}


/**
 * 淡入动画
 */
class FadeInView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0),
        };
    }
    componentDidMount() {
        Animated.timing(
            this.state.fadeAnim,
            {
                duration: 2000,
                toValue: 1,
            }
        ).start((result) => alert(JSON.stringify(result)));
    }
    render() {
        return (
            <View style={Styles.container}>
                <Animated.View style={{
                    opacity: this.state.fadeAnim,
                    backgroundColor: '#ccc', width: 200, height: 200
                }}>
                </Animated.View>
                <Button style={Styles.button} title="Stop" onPress={() => { Animated.timing().stop() }}></Button>
            </View>

        );
    }
}

const Styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
    button: {
        backgroundColor: 'red',
        width: 100,
        height: 45,
    }
});

export default BaseComponentF(AnimationDemo);